<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>地质灾害应急救援系统</title>
    <!-- 引入高德地图 JavaScript API，添加 GeoJSON 插件 -->
    <script src="https://webapi.amap.com/maps?v=2.0&key=b19645e85be1f52fdf901ffb5f9a7509&plugin=AMap.GeoJSON"></script>
    <!-- 移除默认 favicon 请求 -->
    <link rel="icon" href="data:,">
    <style>
        /* 重置默认边距，避免留白 */
        body, html {
            margin: 0; 
            padding: 0; 
            height: 100%; /* 让根元素占满浏览器高度 */
        }
        #container {
            width: 100%; 
            /* 动态占满剩余高度 */
            height: calc(100vh - 0px);
        }
        /* 样式化复选框容器 */
        #layer-controls {
            position: absolute;
            top: 10px;
            left: 10px;
            background-color: white;
            padding: 10px;
            border: 1px solid #ccc;
            z-index: 100;
        }
        /* 样式化搜索框 */
        #search-container {
            position: absolute;
            top: 10px;
            left: 250px;
            background-color: white;
            padding: 10px;
            border: 1px solid #ccc;
            z-index: 100;
        }
        /* 样式化输入提示列表 */
        #input-tips-list {
            position: absolute;
            top: 40px;
            left: 250px;
            background-color: white;
            padding: 10px;
            border: 1px solid #ccc;
            z-index: 100;
            list-style-type: none;
            margin: 0;
            padding: 0;
        }
        #input-tips-list li {
            cursor: pointer;
            padding: 5px;
        }
        #input-tips-list li:hover {
            background-color: #f0f0f0;
        }
    </style>
</head>
<body>
    <!-- 地图容器 -->
    <div id="container"></div>
    <!-- 图层控制复选框 -->
    <div id="layer-controls">
        <input type="checkbox" id="disaster-layer" checked> 灾害点
        <input type="checkbox" id="rescue-layer" checked> 救援点
        <input type="checkbox" id="shelter-layer" checked> 避难所
        <input type="checkbox" id="sos-layer" checked> SOS点
    </div>
    <!-- 搜索框 -->
    <div id="search-container">
        <input type="text" id="search-input" placeholder="搜索地点">
        <button id="search-button">搜索</button>
    </div>
    <!-- 输入提示列表 -->
    <ul id="input-tips-list"></ul>
    <script>
        // 初始化地图
        var map = new AMap.Map('container', {
            zoom: 10, // 地图缩放级别
            center: [114.93, 25.85] // 地图中心点坐标
        });

        // 定义 GeoJSON 文件的路径
        var geojsonFiles = [
            { file: 'disaster.GeoJson', id: 'disaster-layer' },
            { file: 'rescue.GeoJson', id: 'rescue-layer' },
            { file: 'shelter.GeoJson', id: 'shelter-layer' },
            { file: 'SOS.GeoJson', id: 'sos-layer' }
        ];

        // 存储每个 GeoJSON 图层的引用
        var geoJSONLayers = {};
        // 存储所有 GeoJSON 数据
        var allGeoJSONData = [];

        // 循环加载每个 GeoJSON 文件
        geojsonFiles.forEach(function(item) {
            var xhr = new XMLHttpRequest();
            xhr.open('GET', item.file, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    var geojsonData = JSON.parse(xhr.responseText);
                    allGeoJSONData = allGeoJSONData.concat(geojsonData.features);
                    var geoJSONLayer = new AMap.GeoJSON({
                        geoJSON: geojsonData,
                        // 可以根据需要自定义样式
                        strokeColor: '#FF33FF',
                        strokeWeight: 2,
                        strokeOpacity: 1,
                        fillColor: '#FF9900',
                        fillOpacity: 0.5
                    });
                    geoJSONLayer.setMap(map);
                    geoJSONLayers[item.id] = geoJSONLayer;

                    // 监听复选框的变化
                    document.getElementById(item.id).addEventListener('change', function() {
                        if (this.checked) {
                            geoJSONLayers[item.id].setMap(map);
                        } else {
                            geoJSONLayers[item.id].setMap(null);
                        }
                    });
                }
            };
            xhr.send();
        });

        // 监听搜索按钮点击事件
        document.getElementById('search-button').addEventListener('click', function() {
            var keyword = document.getElementById('search-input').value;
            if (keyword) {
                // 构建REST API请求URL
                var apiKey = 'b19645e85be1f52fdf901ffb5f9a7509';
                var url = `https://restapi.amap.com/v3/place/text?key=${apiKey}&keywords=${keyword}&types=&city=&children=1&offset=20&page=1&extensions=all`;

                var xhr = new XMLHttpRequest();
                xhr.open('GET', url, true);
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        var response = JSON.parse(xhr.responseText);
                        if (response.status === '1' && response.count > 0) {
                            // 清除之前的标记
                            map.clearMap();

                            // 重新添加所有 GeoJSON 图层
                            for (var layerId in geoJSONLayers) {
                                geoJSONLayers[layerId].setMap(map);
                            }

                            // 标记匹配的地点
                            response.pois.forEach(function(poi) {
                                var location = poi.location.split(',');
                                var coordinates = [parseFloat(location[0]), parseFloat(location[1])];
                                var marker = new AMap.Marker({
                                    position: coordinates,
                                    map: map
                                });

                                // 创建信息窗口
                                var infoWindow = new AMap.InfoWindow({
                                    content: `<p>名称: ${poi.name}</p><p>地址: ${poi.address}</p>`,
                                    offset: new AMap.Pixel(0, -30)
                                });

                                // 监听标记的点击事件，显示信息窗口
                                marker.on('click', function() {
                                    infoWindow.open(map, marker.getPosition());
                                });
                            });
                        }

                        // 再搜索 GeoJSON 数据
                        var matchedFeatures = allGeoJSONData.filter(function(feature) {
                            return feature.properties && feature.properties.name && feature.properties.name.includes(keyword);
                        });

                        if (matchedFeatures.length > 0) {
                            // 标记匹配的地点
                            matchedFeatures.forEach(function(feature) {
                                var coordinates = feature.geometry.coordinates;
                                var marker = new AMap.Marker({
                                    position: coordinates,
                                    map: map
                                });

                                // 创建信息窗口
                                var infoWindow = new AMap.InfoWindow({
                                    content: `<p>名称: ${feature.properties.name}</p>`,
                                    offset: new AMap.Pixel(0, -30)
                                });

                                // 监听标记的点击事件，显示信息窗口
                                marker.on('click', function() {
                                    infoWindow.open(map, marker.getPosition());
                                });
                            });
                        }
                    }
                };
                xhr.send();
            }
        });

        // 监听搜索框输入事件，获取输入提示
        document.getElementById('search-input').addEventListener('input', function() {
            var keyword = this.value;
            if (keyword) {
                var apiKey = 'b19645e85be1f52fdf901ffb5f9a7509';
                var location = '116.481488,39.990464'; // 示例位置
                var city = '北京'; // 示例城市
                var type = '050301'; // 示例类型
                var url = `https://restapi.amap.com/v3/assistant/inputtips?key=${apiKey}&keywords=${keyword}&type=${type}&location=${location}&city=${city}&datatype=all`;

                var xhr = new XMLHttpRequest();
                xhr.open('GET', url, true);
                xhr.onreadystatechange = function() {
                    if (xhr.readyState === 4 && xhr.status === 200) {
                        var response = JSON.parse(xhr.responseText);
                        var inputTipsList = document.getElementById('input-tips-list');
                        inputTipsList.innerHTML = '';

                        if (response.status === '1' && response.tips.length > 0) {
                            response.tips.forEach(function(tip) {
                                var li = document.createElement('li');
                                li.textContent = tip.name;
                                li.addEventListener('click', function() {
                                    document.getElementById('search-input').value = tip.name;
                                    inputTipsList.innerHTML = '';

                                    // 清除之前的标记
                                    map.clearMap();

                                    // 重新添加所有 GeoJSON 图层
                                    for (var layerId in geoJSONLayers) {
                                        geoJSONLayers[layerId].setMap(map);
                                    }

                                    if (tip.location) {
                                        var location = tip.location.split(',');
                                        var coordinates = [parseFloat(location[0]), parseFloat(location[1])];
                                        var marker = new AMap.Marker({
                                            position: coordinates,
                                            map: map
                                        });

                                        // 创建信息窗口
                                        var infoWindow = new AMap.InfoWindow({
                                            content: `<p>名称: ${tip.name}</p><p>地址: ${tip.address || '无'}</p>`,
                                            offset: new AMap.Pixel(0, -30)
                                        });

                                        // 监听标记的点击事件，显示信息窗口
                                        marker.on('click', function() {
                                            infoWindow.open(map, marker.getPosition());
                                        });

                                        // 打开信息窗口
                                        infoWindow.open(map, marker.getPosition());
                                    }
                                });
                                inputTipsList.appendChild(li);
                            });
                        }
                    }
                };
                xhr.send();
            } else {
                document.getElementById('input-tips-list').innerHTML = '';
            }
        });
    </script>
</body>
</html>